<script>
import Moveable from "vue3-moveable";
import { ref, onMounted } from "vue";
import {DimensionViewable,Editable,DraggableHandle} from "./components/HelloWorld";



export default {
  components: { Moveable },
  setup() {
    const targetRef = ref(null);
    const dragTarget = ref(null);
    const onDrag = e => {
      e.target.style.transform = e.transform;
    };
    const onResize = e => {
      e.target.style.width = `${e.width}px`;
      e.target.style.height = `${e.height}px`;
      e.target.style.transform = e.drag.transform;
    };
    const onRotate = e => {
      e.target.style.transform = e.drag.transform;
    };
    onMounted(() => {
      dragTarget.value = document.querySelector(".moveable-draggableHandle");
    });
    return {
      targetRef,
      DimensionViewable,
      Editable,
      DraggableHandle,
      dragTarget,
      onDrag,
      onResize,
      onRotate
    };
  }
};
</script>
<template>
  <div class="container">
    <div
        class="target"
        ref="targetRef"
        id="AAAAAAAA"
    ></div>
    <Moveable
        :target="targetRef"
        :ables="[Editable,DimensionViewable,DraggableHandle]"
        :draggable="true"
        :resizable="true"
        :rotatable="true"
        :dragTarget="dragTarget"
        :props="({ dimensionViewable: true,editable: true,draggableHandle:true })"
        @drag="onDrag"
        @resize="onResize"
        @rotate="onRotate"/>
  </div>
</template>
<style lang="css">
.container {
  width: 100%;
  height: 100%;
}
.target {
  height: 100px;
  width: 100px;
}
</style>